<template>
	<view v-if="showGoods">
		<view class="goods-list-boox">
			<view class="common">
				<view class="close-info" @click="close">关闭</view>
				<view class="good-detial">
					<view v-if="detail && detail.img" class="good-img">
						<image :src="detail.img" mode="widthFix"></image>
					</view>
					<view class="goods-info">
						<view class="goods-title">{{date.year}}-{{date.month}}-{{date.day}}({{date.weekName}}){{detail.name}}</view>
						<view class="shop-name" v-if="detail.shop_name">
							食堂：{{detail.shop_name}}
						</view>
						<view class="goods-price">￥{{detail.price}}</view>
					</view>
				</view>
				
				<view class="types">
					<block v-for="(item,index) in useType">
						<view class="type" @click="changeType(item.type,index)" :class="index == typeIndex ? 'active' : ''">{{item.name}}</view>
					</block>
				</view>
				
				<view class="display text-cel good-num">
					<view>数量</view>
					<view>
						<view class="numbox">
							<button class="numbox-btn-minus" type="button" @click.stop="changeCounts" data-type="-1"
								:data-index='index'>-</button>
							<input type="number" v-model="number" @blur="check('number')" />
							<button class="numbox-btn-plus" type="button" @click.stop="changeCounts" data-type="1"
								:data-index='index'>+</button>
						</view>
					</view>
				</view>
			</view>
			<view style="height: 130rpx;width: 100%;"></view>
			<view class="submit-goodsbtn-box" @click="submit">
				<view class="submit-goods-btn">确定</view>
			</view>
		</view>
		<view class="maskLayer" @click="close"></view>
	</view>
</template>

<script>
	import moment from '@/utils/moment';
	import helper from '@/utils/helper.js';
	export default {
		props: {
			transmitChildren: {
				type: Boolean,
				value: false
			},
			detail: {
				type: Object,
				value: {}
			}
		},
		data() {
			return {
				date:{},
				number: 1,
				showGoods: false,
				index:'',
				useType:[{name:'堂食',type:0},{name:'配送',type:1}],
				typeIndex:0,
				type:0
			}
		},
		created() {},
		filters: {
			// 时间格式化
			time(val) {
				return moment(val * 1000).format('YYYY-MM-DD HH:mm')
			},
			//
			toInt(val) {
				return helper.toInt(val);
			}
		},
		watch: {
			transmitChildren(val) {
				if (val) {
					this.number = 1;
				}
			},
			detail(val) {
				console.log(val)
			}
		},
		methods: {
			//
			open(date) {
				this.showGoods = true;
				this.date= date;
			},
			close() {
				this.showGoods = false;
				this.number = 1;
			},
			//
			changeCounts: function(event) {
				var that = this;
				var type = this.getDataSet(event, 'type');
				if (type == 1) {
					this.number = this.number + 1;
				} else {
					if (this.number > 1) {
						this.number = this.number - 1;
					} else {
						this.number = 1;
						uni.showToast({
							title: '订餐数量必须大于1',
							icon: 'error'
						})
					}
				}
			},
			check: function(type) {
				if (type == 'number') {
					if (this.number < 1) {
						this.number = 1;
						uni.showToast({
							title: '订餐数量必须大于等于1',
							icon: 'error'
						})
					}
				}
			},
			submit: function() {
				//
				var tip = '';
				if (this.detail.type == 0) {
					tip = '你即将要预约' + this.number + '份早餐？';
				} else {
					tip = '你即将要预约' + this.number + '份午餐？';
				}
				var that = this;
				uni.showModal({
					title: '提示',
					content: tip,
					success(res) {
						if (res.confirm) {
							that.$emit('changNum', {'num':that.number,'useType':that.type});
							that.close();
						}
					}
				});
			},
			changeType:function(type,index){
				this.typeIndex = index;
				this.type = type;
			}
		}
	}
</script>

<style lang="scss">
	.back-top {
		padding: 40rpx 2% 20rpx;
	}

	.back-top .iconfont {
		margin-right: 10rpx;
		font-size: 28rpx;
	}

	.goods-list-boox {
		position: fixed;
		height: 55vh;
		width: 100%;
		bottom: 0;
		left: 0;
		overflow: scroll;
		z-index: 999;
		background-color: #FFFFFF;
		font-size: $uni-font-size-base;
		padding: 40rpx 4%;
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
		border-top:1px solid #ccc;
	}

	.goods-list {
		display: flex;
		flex-wrap: wrap;
	}

	.display {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.lable-title {
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.goods-item {
		margin: 10rpx;
		border-radius: 40rpx;
		border: 2rpx solid #eee;
		padding: 15rpx 30rpx;
		color: #666;
	}

	.deliver-btn-active {
		color: #FF6600;
		background-color: #ffeae0;
		border: 2rpx solid #ffeae0;
	}

	/* 增加减少数量按钮 */
	button::after {
		border: none;
	}

	.num-box {
		font-size: 36rpx;
		box-sizing: border-box;
		color: #999;
		padding: 0 !important;
	}

	.numbox {
		display: flex;
		width: 350rpx;
		height: 100rpx;
		line-height: 60rpx;
		overflow: hidden;
		vertical-align: middle;
		/* background-color: #efeff4; */
		border-radius: 3px;
		box-sizing: border-box;
		color: #534536;
		border: 1px solid #f7f7f7;

	}

	.numbox [class*=numbox-btn] {
		
		width: 120rpx;
		height: 100%;
		padding: 0;
		overflow: hidden;
		font-size: 70rpx;
		font-weight: bold;
		line-height: 100%;
		color: #534536;
		background-color: #f7f7f7;
		border: none;
		border-radius: 0;
		padding-top: 12rpx;

	}

	.numbox input {
		display: flex;
		align-items: center;
		width:110rpx;
		height: 100% !important;
		margin: 0;
		overflow: hidden;
		text-align: center;
		text-overflow: ellipsis;
		word-break: normal;
		border: none !important;
		border-right: solid 1px #fff !important;
		border-left: solid 1px #fff !important;
		border-radius: 0 !important;
		box-sizing: border-box;
		font-size: 36rpx;
		min-height: 43rpx;
		overflow: hidden;
		text-align: center;
		margin: auto;

	}

	.numbox .numbox-btn-minus {
		left: 0;
		border-top-left-radius: 3px;
		border-bottom-left-radius: 3px;
	}

	.numbox .numbox-btn-plus {
		right: 0;
		border-top-right-radius: 3px;
		border-bottom-right-radius: 3px;
	}

	.dis {
		pointer-events: none;
		cursor: default;
	}

	.numbox .dis {
		color: #e6e6e6 !important;
	}

	/* 增加减少数量按钮 */

	/*删除icon  */

	.icon-shanchu {
		font-size: 30rpx;
		color: #999;
		padding: 20rpx 20rpx 20rpx 10rpx;
		margin-right: -20rpx;
	}

	/*删除icon  */

	.freight-detai {
		color: #FF6600;
		text-decoration: underline;
		padding: 0 10rpx;
	}

	.submit-goodsbtn-box {
		width: 100%;
		position: fixed;
		bottom: 0rpx;
		margin: 20rpx 0 0;
		background: #fff;
		padding: 20rpx 0;
		z-index: 999;
	}

	.submit-goods-btn {
		text-align: center;
		background: #ff6600;
		color: #fff;
		padding: 25rpx 0;
		border-radius: 60rpx;
		width: 80%;
		margin: auto;
	}

	.good-detial {
		display: flex;
	}

	.goods-info {
		width: 80%;
	}

	.good-detial .good-img {
		width: 200rpx;
		height: 200rpx;
		margin-right: 20rpx;
	}

	.good-img image {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}

	.goods-title {
		font-size: 28rpx;
		font-weight: bold;
		height: 55rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		margin-bottom: 10rpx;
	}
	.shop-name{
		font-size: 28rpx;
		line-height: 40rpx;
		margin-bottom: 20rpx;
		color: #ff6600;
	}

	.goods-price {
		font-size: 36rpx;
		color: #FF6600;
	}

	.good-num {
		margin-top: 40rpx;
	}

	.close-info {
		display: flex;
		justify-content: flex-end;
		font-size: 28rpx;
		color: #999
	}
	.types{
		display: flex;margin-top: 20rpx;
		.type{width: 200rpx;border:1px solid #ccc;text-align: center;padding: 25rpx 0;margin-right: 30rpx;border-radius: 10rpx;}
		.active{background-color: #ff6600;border:none;color: #fff;}
	}
</style>
